<template>
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <q-card class="fit no-shadow" bordered>
      <q-tabs
        v-model="tab"
        dense
        class="text-grey"
        active-color="primary"
        indicator-color="primary"
        align="justify"
      >
        <q-tab
          name="contact"
          :class="tab == 'contact' ? 'text-blue' : ''"
          icon="contacts"
          label="联系人"
        />
        <q-tab
          name="message"
          :class="tab == 'message' ? 'text-blue' : ''"
          icon="comment"
          label="消息"
        >
          <q-badge color="red" floating>{{ messages.length }}</q-badge>
        </q-tab>
        <q-tab
          name="notification"
          :class="tab == 'notification' ? 'text-blue' : ''"
          icon="notifications"
          label="通知"
        >
          <q-badge color="red" floating>4</q-badge>
        </q-tab>
      </q-tabs>

      <q-separator />

      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="contact" class="q-pa-sm">
          <q-list class="rounded-borders" separator>
            <q-item
              v-for="(contact, index) in contacts"
              :key="index"
              clickable
              v-ripple
            >
              <q-item-section avatar>
                <q-avatar>
                  <img :src="contact.avatar" />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label lines="1">{{ contact.name }}</q-item-label>
                <q-item-label caption lines="2">
                  <span class="text-weight-bold">{{ contact.position }}</span>
                </q-item-label>
              </q-item-section>

              <q-item-section side>
                <div class="text-grey-8 q-gutter-xs">
                  <q-btn
                    class="gt-xs"
                    size="md"
                    flat
                    color="blue"
                    dense
                    round
                    icon="comment"
                  />
                  <q-btn
                    class="gt-xs"
                    size="md"
                    flat
                    color="red"
                    dense
                    round
                    icon="email"
                  />
                  <q-btn
                    size="md"
                    flat
                    dense
                    round
                    color="green"
                    icon="phone"
                  />
                </div>
              </q-item-section>
            </q-item>
          </q-list>
        </q-tab-panel>

        <q-tab-panel name="message" class="q-pa-sm">
          <q-item v-for="msg in messages" :key="msg.id" clickable v-ripple>
            <q-item-section avatar>
              <q-avatar>
                <img :src="msg.avatar" />
              </q-avatar>
            </q-item-section>

            <q-item-section>
              <q-item-label>{{ msg.name }}</q-item-label>
              <q-item-label caption lines="1">{{ msg.msg }}</q-item-label>
            </q-item-section>

            <q-item-section side>
              {{ msg.time }}
            </q-item-section>
          </q-item>
        </q-tab-panel>

        <q-tab-panel name="notification" class="q-pa-sm">
          <q-list>
            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-avatar color="teal" text-color="white" icon="info" />
              </q-item-section>

              <q-item-section>图标</q-item-section>
            </q-item>
            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-avatar color="teal" text-color="white" icon="report" />
              </q-item-section>

              <q-item-section>图标</q-item-section>
            </q-item>
            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-avatar color="teal" text-color="white" icon="remove" />
              </q-item-section>

              <q-item-section>图标</q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-avatar
                  color="teal"
                  text-color="white"
                  icon="remove_circle_outline"
                />
              </q-item-section>

              <q-item-section>图标</q-item-section>
            </q-item>
          </q-list>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const tab = ref('contact');
import { contacts, messages } from 'pages/data/list';
</script>
